<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理
            <small>预约设置</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约设置</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary"
                                   @click="downloadTemplate()">模板下载
                        </el-button>
                        <el-upload action="/orderSetting/upload.do"
                                   name="excelFile"
                                   :show-file-list="false"
                                   :on-success="handleSuccess"
                                   :before-upload="beforeUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>
                    <div>
                        操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                    </div>
                </el-card>

                <!--日历控件-->
                <el-calendar ref="myCalen">
                    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                    <template slot="dateCell" slot-scope="{date, data}">
                        {{date.getDate()}}

                        <span  v-for="obj in leftobj" style="width: 15px;height: 20px;color: red">
                            {{obj.number}} - {{obj.reservations}}
                        </span>

                        <br>
                        <i v-if="date > today" class="el-icon-edit" @click="handleOrderSet(date)"></i>

                    </template>
                </el-calendar>

            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            today: new Date(),//当前日期
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
            leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
        },
        /*created是页面挂载之前调用的钩子函数*/
        created: function () {//在vue初始化时调用

        },
        /*mounted是页面挂载之后调用的钩子函数*/
        mounted:function(){
            this.init();
        },
        methods: {
            init(){
                /*获取当前时间*/
                let date = this.$refs.myCalen.date;
                /*发送请求，根据当前月份查询预约信息*/
                axios.get("/orderSetting/queryOrderSetting.do?date="+ (date.getFullYear() + "-" + date.getMonth())).then((res) => {

                    this.leftobj = res.data.data;
                    console.log(res.data.data)
                });
            },
            //预约设置 day是用户点击的模块所属的日期
            handleOrderSet(day) {
                this.$prompt('请输入可预约人数', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[1-9]\d*$/,
                    inputErrorMessage: '必须输入正整数'
                }).then(({value}) => {
                    //将 日期与可预约人数 传入后台，并将数据插入到数据库
                    /*let 不会使同名变量的数据发生覆盖*/
                    axios.post("/orderSetting/editOrderSetting.do", {
                        /*日期传到后台必须要转换格式*/
                        orderDate: day,
                        number: value
                    }).then((res) => {
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? 'success' : 'error'
                        });
                    });


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            //上传之前进行文件格式校验
            beforeUpload(file) {
                return true;
            },
            //下载模板文件
            downloadTemplate() {
                window.location.href = "../template/ordersetting_template.xlsx";
            },
            //TODO : 上传成功提示
            handleSuccess(response, file) {
                if (response.flag) {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                } else {
                    this.$message.error(response.message);
                }

            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                var y = year;
                var m = month;
                if (m < 10) m = "0" + m;
                var d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            }
        }
    })
</script>
</html>